<template>
  <view class="business-card-info">
    <view class="info-form">
      <view class="info-form_item">
        <span class="info-form--label">名称</span>
        <UniEasyinput
          v-model="modelValue.name"
          type="text"
          :disabled="false"
          :inputBorder="false"
          :clearable="false"
          placeholder="请输入名称"
        />
      </view>
      <view class="info-form_item">
        <span class="info-form--label">地址</span>
        <FormSelectAddress v-model="modelValue.address" :is-border="false" />
      </view>
      <view class="info-form_item">
        <span class="info-form--label">单位电话</span>
        <UniEasyinput
          v-model="modelValue.officeTel"
          type="text"
          :inputBorder="false"
          :clearable="false"
          placeholder="请输入单位电话"
        />
      </view>
      <view class="info-form_item info-form_upload">
        <span class="info-form--label">
          <text>单位logo</text>
          <text class="label-des">请上传分辨率200*200，2M以内图片</text>
        </span>
        <view class="upload-img">
          <view v-if="modelValue.logo" class="upload-img_item">
            <view class="logo-img">
              <TImage :src="modelValue.logo" width="212rpx" height="135rpx" :preview="true" />
            </view>
            <view class="del-icon" @click="emit('delLogo')">
              <image class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/del-icon.png" mode="scaleToFill" />
            </view>
          </view>
          <view v-else class="upload-img_item upload-img_add" @click="emit('addLogo')">
            <view class="ali-icon">&#xe61f;</view>
            <text>添加图片</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { type PropType } from 'vue';
  import FormSelectAddress from '@/components/Form/components/FormSelectAddress.vue';
  import TImage from '@/components/TImage/index.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';

  export interface BusinessCardInfoType {
    name: string;
    address: string;
    officeTel: string;
    logo: string;
  }

  defineProps({
    modelValue: {
      type: Object as PropType<BusinessCardInfoType>,
      required: true,
    },
  });

  const emit = defineEmits(['delLogo', 'addLogo']);
</script>

<style lang="scss" scoped>
  .business-card-info {
    display: flex;
    padding-top: 30rpx;
    .info-form {
      flex: 1;
      &_item {
        height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 27rpx;
        color: #333;
        border-bottom: 1px solid #dddddd;
      }
      &--label {
        min-width: 200rpx;
        text-align: left;
        flex-shrink: 0;
        .label-des {
          font-size: 23rpx;
          color: #808080;
          margin-left: 15rpx;
        }
      }
      &_upload {
        display: block;
        border-bottom: none;
        height: auto;
        margin-top: 30rpx;
        .upload-img {
          margin-top: 30rpx;
          &_item {
            width: 212rpx;
            height: 135rpx;
            background: #f5f5f5;
            border-radius: 10rpx;
            position: relative;
            .logo-img {
              width: inherit;
              height: inherit;
              border-radius: 10rpx;
              overflow: hidden;
            }
            .del-icon {
              width: 50rpx;
              height: 50rpx;
              position: absolute;
              right: -20rpx;
              top: -10rpx;
              text-align: center;
              vertical-align: middle;
              .icon {
                width: 32rpx;
                height: 32rpx;
              }
            }
          }
          &_add {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 27rpx;
            color: #808080;
            .ali-icon {
              font-size: 40rpx;
              margin-bottom: 10rpx;
            }
          }
        }
      }
    }
  }
</style>
